<template>
	<jf-navigation>
		<view>{{$t('index.setting.navigation')}}</view>
	</jf-navigation>
	
	<view class="setting_logo">
		<image src="@/static/images/common/logo.png"></image>
		<view>V1.0.0</view>
	</view>
	
	
	<view class="setting_item" @click="data.shoLang = !data.shoLang">
		<view class="setting_label">{{$t('index.setting.language')}}</view>
		<view class="setting_right">
			<view>{{$t('locale.' + data.language)}}</view>
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/privacy/privacy')">
		<view class="setting_label">{{$t('index.setting.privacy')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/problem/problem')">
		<view class="setting_label">{{$t('index.setting.problem')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/richtext/richtext?key=4')">
		<view class="setting_label">{{$t('index.setting.service')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/richtext/richtext?key=3')">
		<view class="setting_label">{{$t('index.setting.policy')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/jurisdiction/jurisdiction')">
		<view class="setting_label">{{$t('index.setting.jurisdiction')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/richtext/richtext?key=1')">
		<view class="setting_label">{{$t('index.setting.convention')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item">
		<view class="setting_label">{{$t('index.setting.version')}}</view>
		<view class="setting_right">
			<view>{{$t('index.setting.newVersion')}}</view>
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_item" @click="navGo('/pages/index/setting/richtext/richtext?key=2')">
		<view class="setting_label">{{$t('index.setting.about')}}</view>
		<view class="setting_right">
			<image src="@/static/images/index/icon014.png" class="setting_right_arrow"></image>
		</view>
	</view>
	
	<view class="setting_btn" @click="logout()">{{$t('index.setting.logout')}}</view>
	
	<jf-picker :range="data.languages" :title="$t('index.setting.pickerLanguage')" :confirmText="$t('common.operate.confirm')" :cancelText="$t('common.operate.cancel')" v-model:show="data.shoLang" v-model="data.language" @confirm="changeLang"></jf-picker>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance } from 'vue';
	
	const { proxy } = getCurrentInstance()
	const data = reactive({
		shoLang: false,
		language: uni.getLocale() || 'zh_Hans',
		languages: [
			{ value: 'zh_Hans', key: 'locale.zh_Hans', label: "简体中文"},
			{ value: 'zh_Hant', key: 'locale.zh_Hant', label: "繁體中文"},
			{ value: 'en', key: 'locale.en', label: "English"},
			{ value: 'ja', key: 'locale.ja', label: "日本語"},
			{ value: 'kr', key: 'locale.kr', label: "한국어"}
		]
	})
	
	const navGo = ( url: string ):void => {
		uni.navigateTo({ url })
	}
	const changeLang = ( result:any ):void => {
		const systemInfo:UniApp.GetSystemInfoResult = uni.getSystemInfoSync();
		if (systemInfo.platform.toLowerCase() === 'android') {
		  uni.showModal({
			content: proxy.$t('locale.confirm'),
			cancelText: proxy.$t('uni.showModal.cancel'), // 取消按钮的文字  
			confirmText: proxy.$t('uni.showModal.confirm'), // 确认按钮的文字  
			success: (res) => {
			  if (res.confirm) {
				uni.setLocale(result.values)
			  }
			}
		  })
		} else {
		  uni.setLocale(result.values)
		  proxy.$i18n.locale = result.values
		}
	}
	const logout = ():void => {
		uni.setStorageSync("token", null)
		uni.reLaunch({url: '/pages/login/login'})
	}
	const requestAndroidPermission = (permissionID)=> {
		let result = null
		return new Promise((resolve) => {
			plus.android.requestPermissions(
				['android.permission.CALL_PHONE'], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
				function(resultObj) {
					for (var i = 0; i < resultObj.granted.length; i++) {
						var grantedPermission = resultObj.granted[i];
						result = 1
						console.log('已获取的权限：' + result);
					}
					for (var i = 0; i < resultObj.deniedPresent.length; i++) {
						var deniedPresentPermission = resultObj.deniedPresent[i];
						result = 0
						console.log('拒绝本次申请的权限：' + result);
					}
					for (var i = 0; i < resultObj.deniedAlways.length; i++) {
						var deniedAlwaysPermission = resultObj.deniedAlways[i];
						result = -1
						console.log('永久拒绝申请的权限：' + result);
					}
					resolve(result);
					// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
				},
				function(error) {
					console.log('申请权限错误：' + error.code + " = " + error.message);
					resolve({
						code: error.code,
						message: error.message
					});
				}
			);
		});
	}
	
	requestAndroidPermission("android.permission.INTERNET").then((res) => {
		console.log(res)
	})
	//android.permission.CAMERA 拍照
	//android.permission.ACCESS_COARSE_LOCATION 获取错略位置
	//android.permission.WRITE_EXTERNAL_STORAGE 写入外部存储
</script>

<style lang="scss">
	.setting_logo{
		width: 100vw;
		height: 270rpx;
		@include layout(column,center,center);
		border-bottom: 12rpx solid #F2F4F6;
		font-weight: 400;
		line-height: 54rpx;
		font-size: 32rpx;
		image{
			width: 144rpx;
			height: 144rpx;
			margin-bottom: 24rpx;
		}
	}
	.setting_item{
		width: 686rpx;
		margin-left: 32rpx;
		@include layout();
		border-bottom: 2rpx solid #E7EAEE;
		padding: 32rpx 0;
		font-size: 28rpx;
		line-height: 32rpx;
		.setting_label{
			flex-shrink: 0;
			font-weight: 400;
			color: #535A69;
		}
		.setting_right{
			flex-grow: 1;
			@include layout(row, center, flex-end);
			margin-left: 16rpx;
			color: #A2A9B7;
			text-align: right;
			.setting_right_portrait{
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
			.setting_right_arrow{
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
				margin-left: 4rpx;
			}
			.setting_right_active{
				color: var(--color-primary);
			}
		}
	}
	.setting_btn{
		width: 686rpx;
		line-height: 96rpx;
		border: 2rpx solid #1F2937;
		margin: 100rpx 0 0 32rpx;
		text-align: center;
		font-weight: 500;
		color: #1F2937;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>